<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<title>分类</title>
		<link href="../css/mui.min.css" rel="stylesheet" />
		<link rel="stylesheet" type="text/css" href="../fonts/iconfont/iconfont.css" />
		<link rel="stylesheet" type="text/css" href="../css/global.css" />
		<style type="text/css">
			.group_list {
				width: 100%;
				overflow: hidden;
			}
			
			.group_list li {
				width: calc(90%/4);
				margin: calc(10%/8);
				float: left;
			}
			
			.mui-table-view:before,
			.mui-table-view:after {
				background-color: transparent;
			}
		</style>
	</head>

	<body ng-app="app" ng-controller="cateController">
		<header class="mui-bar mui-bar-nav bg_white">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
			<h1 class="mui-title colorP">{{name}}</h1>
		</header>
		<div class="mui-content">
			<div></div>
			<ul class="mui-table-view margin-bottom10px">
				<li class="mui-table-view-cell">
					<ul class="group_list">
						<li  ng-click="open(x.name,x.id)" class="text-aligin" ng-repeat="x in cates">
							<img class="circle_pic" ng-src="{{x.image}}" alt="" />
							<p class="colorP mui-ellipsis">{{x.name}}</p>
						</li>

					</ul>
				</li>
			</ul>

		</div>
	</body>
	<script src="../js/mui.min.js"></script>
	<script src="../js/open.js"></script>
	<script src="../js/jquery.min.js"></script>
	<script type="text/javascript" src="../js/angular.js"></script>
	<script type="text/javascript" src="../js/apppublic.js" ></script>
	<script type="text/javascript">
		$('.danger_zone').click(function() {
			$('.alert_window').css('display', 'block');
		})
		$('.I_know').click(function() {
			$('.alert_window').css('display', 'none');
		})
	</script>
	<script>
		var type;
		var app = angular.module("app", []);
		app.controller("cateController", function($scope, $http) {
			$scope.initView = function(id) {
				$http({
					method: 'post',
					url: apiRoot,
					data: {
						action: 'Trade.getCate',
						parent: id
					}
				}).then(function success(response) {
					$scope.cates = response.data.data;
				})
			}
			
			
			$scope.open = function(name,id){
				openPage('DIY.html',{name:name,type:id});
			}
		})

		document.addEventListener("plusready", function() {
			appElement = document.querySelector('[ng-controller=cateController]');
			$scope = angular.element(appElement).scope();
			type = plus.webview.currentWebview().type;
			$scope.name = plus.webview.currentWebview().name;
			$scope.type = type;
			$scope.initView(type);
			$scope.$apply();
		})
	</script>

</html>